<template>
  <view class="lm-space-between" :style="{ backgroundColor: bacColor }" @click="change">
    <view class="lm-space-between-left" :class="{ act: required }">{{ lable }}</view>
    <view class="lm-space-between-right">
      <view class="inputView" v-if="disabled">
        <view v-if="modelValue" class="twoline">{{ modelValue }}</view>
        <view v-else class="twoline">{{ placeholder }}</view>
      </view>
      <input
        v-else
        :type="type"
        :value="modelValue"
        :placeholder="placeholder"
        :adjust-position="adjustPosition"
        @input="changeInput"
      />
      <template v-if="$slots.right">
        <slot name="right"></slot>
      </template>
      <uv-icon name="arrow-right" v-if="disabled && showIcon && !$slots.right" size="14"></uv-icon>
      <!-- <uni-icons v-if="disabled && showIcon && !$slots.right" type="right" size="18"></uni-icons> -->
    </view>
  </view>
</template>

<script setup lang="ts" name="LmInput">
/**
 * lm-input 自定义输入框
 * @tutorial https://uniapp.dcloud.net.cn/component/input.html#input
 * @property {String} type input类型默认text 可选 number|idcard|digit|tel|safe-password|nickname
 * @property {String} lable 左侧文字
 * @property {String} placeholder 输入框为空时占位符
 * @property {String} showIcon 是否显示右侧箭头 默认false
 * @property {String} required 是否必填 默认false
 * @property {String} disabled 是否只读 默认false
 * @property {String} bacColor 背景色 默认#FFFFFF
 */
// vue props
const props = defineProps({
  adjustPosition: {
    type: Boolean,
    default: true,
  },
  modelValue: {
    type: String,
    default: '',
  },
  type: {
    type: String,
    default: 'text',
  },
  lable: {
    type: String,
    default: '',
  },
  placeholder: {
    type: String,
    default: '',
  },
  // 是否显示右侧箭头
  showIcon: {
    type: Boolean,
    default: false,
  },
  // 是否必填
  required: {
    type: Boolean,
    default: false,
  },
  // 是否只读
  disabled: {
    type: Boolean,
    default: false,
  },
  // 背景色
  bacColor: {
    type: String,
    default: '#FFFFFF',
  },
})
// vue emits
const emit = defineEmits(['onChange', 'update:modelValue', 'changeInput'])
function change() {
  if (props.disabled === false) return
  emit('onChange')
}
function changeInput(event) {
  emit('update:modelValue', event.detail.value)
}
</script>
<style lang="scss" scoped>
.inputs {
  .lable {
    margin-bottom: 20rpx;
    font-family: 'PingFang SC-Regular', 'PingFang SC';
    font-size: 32rpx;
    font-weight: 400;
    color: #060220;
  }

  .icon-img {
    width: 40rpx;
    height: 40rpx;
  }

  .code {
    color: #009a29;
  }
  /* #ifdef VUE3 */
  :deep(.uni-easyinput__content) {
    padding: 10rpx 28rpx;
    border-radius: 15rpx;
  }
  /* #endif */
  /* #ifndef VUE3 */
  /deep/.uni-easyinput__content {
    padding: 10rpx 28rpx;
    border-radius: 15rpx;
  }
  /* #endif */
}

.lm-space-between {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 92rpx;
  padding: 26rpx 32rpx;
  margin-bottom: 32rpx;
  line-height: 92rpx;
  background-color: #fff;
  border-radius: 12rpx;
  box-shadow: 0rpx 4rpx 8rpx 0rpx rgb(0 0 0 / 4%);

  &-left {
    margin-right: 10px;
    font-family: 'PingFang SC-Regular', 'PingFang SC';
    font-size: 28rpx;
    font-weight: 600;
    color: #1d2129;

    &.act {
      &::before {
        color: #f53f3f;
        content: '*';
      }
    }
  }

  &-right {
    display: flex;
    flex: 1;
    align-items: center;

    input {
      flex: 1;
      font-family: 'PingFang SC-Regular', 'PingFang SC';
      font-size: 28rpx;
      font-weight: 400;
      text-align: right;
    }

    .inputView {
      flex: 1;

      view {
        font-family: 'PingFang SC-Regular', 'PingFang SC';
        font-size: 28rpx;
        font-weight: 400;
        text-align: right;
      }
    }
    /* #ifdef VUE3 */
    :deep(.u-icon) {
      margin-left: 15rpx;
    }
    /* #endif */
    /* #ifndef VUE3 */
    /deep/.u-icon {
      margin-left: 15rpx;
    }
    /* #endif */
  }

  .twoline {
    display: -webkit-box;
    width: 98%;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
  }
}
</style>
